<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>客服聊天</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div class="dialogue-wrapper">
      <div class="dialogue-main">
        <div class="dialogue-header">
          <span>智能小ai正在为您服务</span>
        </div>
        <div id="dialogue_contain" class="dialogue-contain">
          <p class="dialogue-service-contain">
            <i class="dialogue-service-img"><img src="./img/timg.jpg"/></i>
            <span class="dialogue-text dialogue-service-text">
              您好，请提问
            </span>
          </p>
          <p class="dialogue-service-contain">
            <i class="dialogue-service-img"><img src="./img/timg.jpg"/></i>
            <span class="dialogue-text dialogue-service-text">
              <a
                href="/码云/web-dialogue/file/下载.xlsx"
                download="下载.xlsx"
                style="width: 150px;border: 1px solid #4e8cee;border-radius: 5px;padding: 10px;"
              >
                <span
                  style="float: left;width: 110px;display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;"
                >
                  隆正-需求作业平台项目-项目日报-冉昱-3.31.xlsx
                </span>
                <img src="./img/word.png" style="width: 40px;float: right;" />
              </a>
            </span>
          </p>
        </div>
        <div class="dialogue-info">
          <ul></ul>
        </div>
        <div class="dialogue-submit">
          <p id="dialogue_hint" class="dialogue-hint">
            <span class="dialogue-hint-icon">!</span
            ><span class="dialogue-hint-text">发送内容不能为空</span>
          </p>
          <input
            id="dialogue_input"
            class="dialogue-input-text"
            placeholder="请输入您的问题，按Enter键提交"
          />
          <div class="dialogue-input-tools">
            <!-- 小工具预留位置 -->
            <button id="sendBtn" class="sendBtn">确定</button>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="./js/highlight.js"></script>
    <script>
      var doc = document
      // 模拟一些后端传输数据
      var obj = {
        errCode: "000000",
        errDesc: "success",
        svcFLowNo: "",
        cliFlowNo: "",
        object: "你好，这里是：\n1.贷款\n2.信用"
      }

      var datas = [
        "我现在退货，请尽快处理。",
        "麻烦退货地址发一下",
        "发什么快递",
        "有尺码表吗？",
        "尺码表推荐"
      ]

      var dialogueInput = doc.getElementById("dialogue_input"),
        dialogueContain = doc.getElementById("dialogue_contain"),
        dialogueHint = doc.getElementById("dialogue_hint"),
        timer,
        timerId,
        shiftKeyOn = false // 辅助判断shift键是否按住

      //确定按钮被点击
      $("#sendBtn").click(function() {
        if (dialogueInput.value == "") {
          setTimeout(function() {
            fadeIn(dialogueHint)
            clearTimeout(timerId)
            timer = setTimeout(function() {
              fadeOut(dialogueHint)
            }, 2000)
          }, 10)
          timerId = timer
          return true
        } else {
          sendMessage()
          filterArray()
        }
      })

      dialogueInput.addEventListener("keydown", function(e) {
        var e = e || window.event
        if (e.keyCode == 16) {
          shiftKeyOn = true
        }
        if (shiftKeyOn) {
          return true
        } else if (e.keyCode == 13 && dialogueInput.value == "") {
          // console.log('发送内容不能为空');
          // 多次触发只执行最后一次渐隐
          setTimeout(function() {
            fadeIn(dialogueHint)
            clearTimeout(timerId)
            timer = setTimeout(function() {
              fadeOut(dialogueHint)
            }, 2000)
          }, 10)
          timerId = timer
          return true
        } else if (e.keyCode == 13) {
          sendMessage()
          filterArray()
        }
      })

      //发送消息
      function sendMessage() {
        var nodeP = doc.createElement("p"),
          nodeSpan = doc.createElement("span"),
          nodeI = document.createElement("i"),
          nodeImg = document.createElement("img")
        nodeP.classList.add("dialogue-customer-contain")
        nodeSpan.classList.add("dialogue-text", "dialogue-customer-text")
        nodeI.classList.add("dialogue-service-img")
        nodeImg.setAttribute("src", "./img/userImg.jpg")
        nodeSpan.innerHTML = dialogueInput.value
        nodeI.appendChild(nodeImg)
        nodeP.appendChild(nodeSpan)
        nodeP.appendChild(nodeI)
        dialogueContain.appendChild(nodeP)
        dialogueContain.scrollTop = dialogueContain.scrollHeight
        submitCustomerText(dialogueInput.value)
        dialogueInput.value = "" //发送后清空input值
      }

      dialogueInput.addEventListener("keyup", function(e) {
        var e = e || window.event
        if (e.keyCode == 16) {
          shiftKeyOn = false
          return true
        }
        if (!shiftKeyOn && e.keyCode == 13) {
          dialogueInput.value = null
        }
      })

      function submitCustomerText(text) {
        //console.log(text)
        // code here 向后端发送text内容
        // 模拟后端回复
        this.timerSerch = setTimeout(function() {
          getServiceText(obj)
        }, 1000)
      }

      // keydown - 键按下的过程
      // keypress - 键被按下
      // keyup - 键被松开
      function getServiceText(data) {
        var serviceText = data.object
        var textArr = []
        //可以用字符或字符串分割
        textArr = serviceText.split("\n")
        // console.log(textArr);
        //回复
        var nodeDiv1 = doc.createElement("div"),
          nodeDiv2 = doc.createElement("div"),
          nodeP1 = doc.createElement("p"),
          // nodeP2 = doc.createElement('p'),
          // nodeP3 = doc.createElement('p'),
          nodeUl = doc.createElement("ul"),
          nodeSpan = doc.createElement("span")
        ;(nodeI = document.createElement("i")),
          (nodeImg = document.createElement("img"))
        //为节点添加class
        nodeDiv1.classList.add("dialogue-service-contain")
        nodeDiv2.classList.add("dialogue-text", "dialogue-service-text")
        nodeP1.classList.add("dialogue-question")
        nodeUl.classList.add("dialogue-reply-link")
        nodeI.classList.add("dialogue-service-img")
        nodeImg.setAttribute("src", "./img/timg.jpg")
        //插入节点到指定div
        nodeI.appendChild(nodeImg)
        nodeDiv1.appendChild(nodeI)
        nodeDiv2.appendChild(nodeP1)
        nodeDiv2.appendChild(nodeUl)
        nodeDiv1.appendChild(nodeDiv2)
        nodeP1.innerHTML = textArr[0]
        //循环插入li数据
        for (let i in textArr) {
          if (i > 0) {
            var nodeLi = doc.createElement("li")
            nodeUl.appendChild(nodeLi)
            nodeLi.innerHTML = textArr[i]
          }
        }
        dialogueContain.appendChild(nodeDiv1)
        dialogueContain.scrollTop = dialogueContain.scrollHeight
        assignmentLink()
      }

      //获取点击的li值，并赋值给input
      function assignmentLink() {
        //获取点击的li下标，并取出newData对应下标的值，赋值给input框
        $(".dialogue-reply-link")
          .find("li")
          .each(function() {
            $(this).click(function() {
              console.log(this.innerHTML)
              $("#dialogue_input").val(this.innerHTML)
              sendMessage() //发送消息
            })
          })
      }
      // 渐隐
      function fadeOut(obj) {
        var n = 100
        var time = setInterval(function() {
          if (n > 0) {
            n -= 10
            obj.style.opacity = "0." + n
          } else if (n <= 30) {
            obj.style.opacity = "0"
            clearInterval(time)
          }
        }, 10)
        return true
      }

      // 渐显
      function fadeIn(obj) {
        var n = 30
        var time = setInterval(function() {
          if (n < 90) {
            n += 10
            obj.style.opacity = "0." + n
          } else if (n >= 80) {
            obj.style.opacity = "1"
            clearInterval(time)
          }
        }, 100)
        return true
      }

      // 动态获取input值
      $(doc).ready(function() {
        $("#dialogue_input").bind("propertychange input", function() {
          var text = $("#dialogue_input").val()
          this.timerSerch = setTimeout(function() {
            //如果一直输入，就先不查询，等键抬起500毫秒之后再进行查询。
            filterArray(text)
          }, 500)
        })
        assignmentLink() //初次点击li
      })

      //筛选数组
      function filterArray(text) {
        var j = 0
        var newData = []
        //查找符合条件值并存入新数组
        if (text) {
          for (let i in datas) {
            if (datas[i].indexOf(text) != -1) {
              newData[j++] = datas[i]
            }
          }
        }
        renderData(newData, text)
      }

      // 渲染到li中
      function renderData(newData, text) {
        htmlInit = ""
        for (var i = 0; i < newData.length; i++) {
          if (i == newData.length - 1) {
            htmlInit += "<li>" + newData[i] + "</li>"
          } else {
            htmlInit += '<li class="li-border-bottom" >' + newData[i] + "</li>"
          }
        }
        $(".dialogue-info ul").html(htmlInit)
        heightLing(text) //高亮输入内容
        assignment(newData) //获取点击的值
      }

      //高亮输入内容
      function heightLing(text) {
        $(".dialogue-info ul").highlight({
          color: "#09d07d", // 高量颜色，默认:#f00
          weight: true, // 是否加粗，默认:不加粗
          keys: text //需要高亮的值，必须的
        })
      }

      //获取点击的li值，并赋值给input
      function assignment(newData) {
        //获取点击的li下标，并取出newData对应下标的值，赋值给input框
        $(".dialogue-info ul li").click(function() {
          var index = $(this).index()
          $("#dialogue_input").val(newData[index])
          filterArray() //重新筛选数组
          sendMessage() //发送消息
        })
      }
    </script>
  </body>
</html>
